<template>
  <div class="app-container">
    <div class="bg_fff mb_12 pl_14">
      <breadcrumb/>
    </div>
    <div class="content-table">
      <div class="form-content">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
          <el-form-item label="来源" prop="type">
            <el-select
              v-model="queryParams.type"
              placeholder="请选择来源"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="dict in typeList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>

          </el-form-item>
          <el-form-item label="主题" prop="theme">
            <el-select
              v-model="queryParams.theme"
              placeholder="请选择主题"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="dict in themeList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>

          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入姓名"
              clearable
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input
              v-model="queryParams.phone"
              placeholder="请输入手机号码"
              clearable
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="queryParams.status"
              placeholder="请选择状态"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="dict in statusList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>

          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-content">
        <div class="table-group">
          <div class="group-right">
            <el-button size="mini" @click="addService" class="exportBtn" v-hasPermi="['customerServiceList:add']">新增</el-button>
            <el-button size="mini" @click="handleExport" class="exportBtn" v-hasPermi="['customerServiceList:export']">导出</el-button>
          </div>
        </div>
        <div class="table-big">
          <el-table :data="tableDataList"
                    ref="advergroupTable"
                    :max-height="tableHeight"
                    class="tableHightClass"
          >
            <el-table-column type="index" width="50" label="序号" align="center"/>
            <el-table-column :label="item.label" align="center" v-for="(item,index) in tableColumns" :prop="item.key" v-if="item.visible?item.visible:true" :min-width="item.minWidth?item.minWidth:``" :fixed="item.fixed?item.fixed:false" :show-overflow-tooltip="true">
              <!--用于表格自定义-->
              <template slot-scope="scope">
                <!--状态-->

                <div v-if="item.key=='status_name'" class="status">
                  <span :class="scope.row.status==1? `color-green`:`color-red`">{{scope.row[item.key]}}</span>
                </div>
                <div v-else>{{scope.row[item.key]}}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width"
                             width="120">
              <template slot-scope="scope">
                <div class="group-btn">
                  <el-tooltip content="跟进" placement="top" effect="light" v-hasPermi="['customerServiceList:edit']">
                    <img src="@/assets/images/tableEdit.png" alt="" @click="handleEdit(scope.row)">
                  </el-tooltip>
                  <el-tooltip content="查看" placement="top" effect="light" v-hasPermi="['customerServiceList:view']">
                    <img src="@/assets/images/tableView.png" alt="" @click="handleView(scope.row)">
                  </el-tooltip>


                </div>

              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total>10"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.num"
            @pagination="getList"
          />
        </div>

      </div>
    </div>
    <addOrEditServe v-if="addOrEditServe" :visableIf.sync="addOrEditServe" :dialogType="dialogType" @handleQuery="handleQuery"></addOrEditServe>
    <trackServe v-if="trackServe" :visableIf.sync="trackServe" :id="id" @handleQuery="handleQuery"></trackServe>
    <viewServe v-if="viewServe" :visableIf.sync="viewServe" :id="id"></viewServe>
  </div>

</template>
<script>
  import { reqCustomerList, reqAdviceTypeList, reqAdviceThemeList, reqAdviceStatusList,reqIndexExport } from '@/api/customerServiceMgt/index'


  export default {
    name: 'customerServiceList',
    components: {
      'addOrEditServe': () => import('./addOrEditServe'),
      'trackServe': () => import('./trackServe'),
      'viewServe': () => import('./viewServe')
    },
    data() {
      return {
        dialogType: '',//参数
        // 查询参数
        total: 8,// 表格的总条数
        addOrEditServe: false,//新增客服
        trackServe: false,//跟进控制显隐
        viewServe: false, //查看跟进
        tableHeight: null,
        id: null,//id
        queryParams: {
          page: 1,
          num: 10,
          name: '',//名字
          type: null,//来源
          theme: null,//主题
          phone: null,//手机号码
          status: null//状态

        },
        statusList: [],//状态集合
        typeList: [],//来源
        themeList: [],//主题
        tableDataList: [],//表格数据
        tableColumns: [
          { key: 'type_name', label: `来源类型`, visible: true, minWidth: 100 },
          { key: 'user_type_name', label: `来源详情`, visible: true, minWidth: 100 },
          { key: 'theme_name', label: `主题`, visible: true, minWidth: 100 },
          { key: 'u_id', label: `用户ID`, visible: true, minWidth: 150 },
          { key: 'name', label: `姓名`, visible: true, minWidth: 150 },
          { key: 'phone', label: `手机号`, visible: true, minWidth: 150 },
          { key: 'company_name', label: `公司名称`, visible: true, minWidth: 150 },
          { key: 'industry_name', label: `行业`, visible: true, minWidth: 150 },
          { key: 'create_time', label: `提交时间`, visible: true, minWidth: 150 },
          { key: 'status_name', label: `跟进状态`, visible: true, minWidth: 150 },
          { key: 'user_login', label: `跟进人`, visible: true, minWidth: 100 },
          { key: 'last_time', label: `跟进时间`, visible: true, minWidth: 150 },
          { key: 'msg', label: `跟进结果`, visible: true, minWidth: 150 }
        ],
        exportColumns: [
          { key: 'type_name', label: `来源类型`, },
          { key: 'user_type_name', label: `来源详情`, },
          { key: 'theme_name', label: `主题`, },
          { key: 'user.id', label: `用户ID`,  },
          { key: 'name', label: `姓名`,  },
          { key: 'phone', label: `手机号`,  },
          { key: 'company_name', label: `公司名称`, },
          { key: 'industry_name', label: `行业`,  },
          { key: 'create_time', label: `提交时间`, },
          { key: 'status_name', label: `跟进状态`, },
          { key: 'admin.user_login', label: `跟进人`, },
          { key: 'last_time', label: `跟进时间`, },
          { key: 'msg', label: `跟进结果`,  }
        ]

      }
    },
    created() {
      this.getList()//列表
      this.getAdviceTypeList()//来源类型
      this.getAdviceThemeList()//主题
      this.getAdviceStatusList()//状态

    },
    watch: {
      tableDataList: {
        handler(val) {
          if (val.length > 0) {
            this.getTabelHeight()//获取表格的最大高度
            this.getTableContentHeight()//获取整体的高度
            this.$refs.advergroupTable.doLayout()
          }

        },
        deep: true,
        immediate: true,
      },
    },
    mounted() {
      this.getTabelHeight()//获取表格的最大高度
      this.getTableContentHeight()//获取整体的高度
      window.onresize = () => {
        return (() => {
          this.getTabelHeight()//获取表格的最大高度
          this.getTableContentHeight()//获取整体的高度
          this.$refs.advergroupTable.doLayout()
        })()
      }
    },
    methods: {
      getAdviceTypeList() {
        reqAdviceTypeList().then(res => {
          console.log('res', res.data)
          let data = res.data
          for (let key in data) {
            let obj = {
              value: Number(key),
              label: data[key]
            }
            this.typeList.push(obj)
          }
        })
      },
      getAdviceThemeList() {
        reqAdviceThemeList().then(res => {
          console.log('res111', res.data)
          let data = res.data
          for (let key in data) {
            let obj = {
              value: Number(key),
              label: data[key]
            }
            this.themeList.push(obj)
          }
        })
      },
      getAdviceStatusList() {
        reqAdviceStatusList().then(res => {
          console.log('res222', res.data)
          let data = res.data
          for (let key in data) {
            let obj = {
              value: key,
              label: data[key]
            }
            this.statusList.push(obj)
          }
        })
      },
      getTableContentHeight() {
        let topHeight = document.querySelector('.table-content').offsetTop
        let windowsHeight = document.body.clientHeight
        document.querySelector('.table-content').style.height = windowsHeight - topHeight - 80 + 'px'
      },
      getTabelHeight() {
        //获取表格的高度
        let topHeight = document.querySelector('.tableHightClass').offsetTop
        let windowsHeight = document.body.clientHeight
        if (this.total > 10) {
          let paginationContainerHeight = document.querySelector('.pagination-container').clientHeight
          this.tableHeight = windowsHeight - topHeight - 20 - paginationContainerHeight - 80
        } else {
          this.tableHeight = windowsHeight - topHeight - 20
        }
      },

      getList() {
        this.tableDataList = []
        this.loading = true
        reqCustomerList(this.queryParams).then(res => {
          this.tableDataList = res.data.list
          this.tableDataList.forEach(item => {
            item.user_login = item.admin ? item.admin.user_login : null;
          })
          this.total = res.data.count
          this.loading = false

        })
      },
      //搜索
      handleQuery() {
        this.queryParams.num = 10
        this.queryParams.page = 1
        this.getList()
      },
      //重置表单
      resetQuery() {
        this.resetForm('queryForm')
        this.handleQuery()
      },
      addService() {
        //新增
        this.dialogType = 'add'
        this.addOrEditServe = true
      },
      //跟进
      handleEdit(row) {
        // //编辑的方法
        this.id = row.id
        this.trackServe = true

      },
      //查看跟进
      handleView(row) {
        this.id = row.id
        this.viewServe = true
      },
      /** 导出按钮操作 */
      handleExport() {
        let form = JSON.parse(JSON.stringify(this.queryParams))
        let head = []
        let keys = []
        this.exportColumns.forEach(item => {
          this.tableColumns.forEach(sitem => {
              if (sitem.label == item.label) {
                if (head.indexOf(item.label) == -1) {
                  head.push(item.label)
                }
                if (keys.indexOf(item.key) == -1) {
                  keys.push(item.key)
                }
              }


          })
        })
        form.head = head
        form.keys = keys
        delete form.page
        delete form.num
        reqIndexExport(form).then((res) => {

          if (res.code == 1) {
            const a = document.createElement('a')
            document.body.appendChild(a)
            a.download = '客服列表数据.xls'
            a.href = res.data
            a.click()
            document.body.removeChild(a)
          }

        })

      },

    }
  }
</script>
<style lang="scss" scoped>
  .app-container {
    .big-title {
      height: 40px;
      border-bottom: 1px solid #D5D5D5;
      background: #fff;
      display: flex;
      align-items: center;
      padding: 0px 24px;
    }

    .form-content {
      padding: 12px;
      background: #fff;
      margin-bottom: 10px;
    }

    /*表格通用代码编写，可用于全局*/
    .table-content {
      background: #fff;
      padding: 0px 15px;

      .table-group {
        display: flex;
        padding: 12px 0px;
        flex-wrap: wrap;

        .group-left {
          width: 200px;
          display: flex;
          flex-wrap: wrap;

          ::v-deep.el-button--primary {
            border: 1px solid #1670F1;
            background: none !important;
            color: #1670F1;
          }
        }

        .group-right {
          flex: 1;
          align-items: center;
          justify-content: flex-end;
          display: flex;

          .suspendBtn {
            background: #FB311E !important;
            border-color: #FB311E;
          }

          .exportBtn, .customStyle {
            border: 1px solid #1670F1;
            background: none !important;
            color: #1670F1;
          }
        }

      }

      /*表格样式*/
      .table-big {
        ::v-deep .el-table {
          .links {
            color: #1670F1;
            text-decoration: underline;
            cursor: pointer;
          }
        }
      }

    }

  }

  .tableList {
    display: flex;
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0px 20px;
    margin: 0;
    height: 54px;
    border-bottom: 10px solid #F8F9FD;
    margin: 16px 0px 0 0px;

    li {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      padding: 0px 10px;
      position: relative;
      cursor: pointer;
      height: 44px;
      color: #8E8E8E;
      margin-right: 30px;

      &.active {
        font-weight: bold;
        color: #000;

        &:after {
          height: 2px;
          background: #1670F1;
          content: '';
          position: absolute;
          left: 10px;
          right: 10px;
          bottom: 0;

        }
      }
    }
  }

  .status {
    span {
      position: relative;
      padding-left: 15px;

      &:after {
        position: absolute;
        left: 0px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        content: '';
        top: 50%;
        margin-top: -4.5px;
      }

      &.color-green:after {

        background: #00DD33;


      }

      &.color-red:after {
        background: #D10807;
      }
    }

  }
</style>
